<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点操作</title>
</head>
<body>
<!-- 利用节点层次关系获取元素   父子兄节点关系获取元素   网页中所有的内容都是节点
    一般的节点至少拥有nodeType节点类型  nodeName节点名称  nodeValue节点值 这三个基本属性
    元素节点 nodeType 为 1
    属性节点 nodeType 为 2
    文本节点 nodeType 为 3 （文本节点包含 文字 空格 换行等）
    在实际开发中 节点操作主要操作的是 元素 节点 

    节点层级 父子兄层级关系
                        父级节点  node.parentNode
                        子节点    parentNode.childNode（非标准）  重点
                                   parentNode.firstChild 返回的是第一个子节点 找不到则返回null 同样包含所有的节点 
                                   
                                   parentNode.lastChild 返回的是最后一个子节点 找不到则返回null 同样包含所有的节点 
                                   parentNode.firstElementChild  返回的是第一个子节点
                                   parentNode.lastElementChild   返回的是最后一个子节点   ie9 以上支持
 -->
            <ul>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>2</li>
                
                <li>3</li>
            </ul>
            <ol>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ol>


                <div class="demo">
                <div class="box">
                    <span class="erweima">x</span>
                </div>
            </div>
            
            <script>
                // 1 父节点 parentNode
                var erweima = document.querySelector('.erweima');
                // var box = document.querySelector('.box');
                // 得到的是离元素最近的父级节点  如果找不到父节点就返回为 null。
                erweima.parentNode;
                console.log(erweima.parentNode);

                //  获取ul 里面的li
                // DOM 提供的方法
                var ul = document.querySelector('ul');
                var lis = ul.querySelectorAll('li');
                // 1 子节点  childNodes 所有的节点 包含 元素节点 文本节点等等
                console.log(ul.childNodes);
                // 2 children 获取所有的子元素节点  也是我们实际开发常用的
                console.log(ul.children);

                // 获取ol里面第一个和最后一个li
                var ol = document.querySelector('ol');
              
                //  1 firstChild  第一个子节点 不管是文本节点还是元素节点
                console.log(ol.firstChild);
                console.log(ol.lastChild);
                //  2 firstElementChild  返回的是第一个子元素节点
                console.log(ol.firstElementChild);
                console.log(ol.lastElementChild);
                //  3 实际开发中的写法 既没有兼容性问题有返回第一个子元素
                console.log(ol.children[0]);
                console.log(ol.children[ol.children.length-177]);
            </script>
</body>
</html>